<style scoped>
    @import 'styles/common.css';
</style>
<template>
    <!-- <div class="dis-block">
        <router-view></router-view>
    </div> -->
  <div class="layout">
    <Layout>
      <Header>
        <Menu mode="horizontal" theme="dark" active-name="1">
          <div class="layout-logo">哈哈</div>
          <div class="layout-nav">
            <MenuItem name="1">
              <Icon type="ios-navigate"></Icon>
                Item 1
            </MenuItem>
            <MenuItem name="2">
              <Icon type="ios-keypad"></Icon>
                Item 2
            </MenuItem>
            <MenuItem name="3">
              <Icon type="ios-analytics"></Icon>
                Item 3
            </MenuItem>
            <MenuItem name="4">
              <Icon type="ios-paper"></Icon>
                Item 4
            </MenuItem>
          </div>
        </Menu>
      </Header>
      <Layout>
        <Sider hide-trigger :style="{background: '#fff'}">
          <Menu active-name="1-2" theme="light" width="auto" :open-names="['1']">
            <Submenu name="1">
              <template slot="title">
                <Icon type="ios-folder"></Icon>
                Item 1
              </template>
              <MenuItem name="1-1" @click="jump()">Option 1</MenuItem>
              <MenuItem name="1-2" @click="jump()">Option 2</MenuItem>
              <MenuItem name="1-3" @click="jump()">Option 3</MenuItem>
            </Submenu>
              <Submenu name="2">
                <template slot="title">
                  <Icon type="ios-folder"></Icon>
                  Item 2
                </template>
                <MenuItem name="2-1">Option 1</MenuItem>
                <MenuItem name="2-2">Option 2</MenuItem>
              </Submenu>
              <Submenu name="3">
                <template slot="title">
                  <Icon type="ios-folder"></Icon>
                  Item 3
                </template>
                <MenuItem name="3-1">Option 1</MenuItem>
                <MenuItem name="3-2">Option 2</MenuItem>
              </Submenu>
          </Menu>
        </Sider>
        <Layout :style="{padding: '0 24px 14px'}">
          <!-- tab 条 -->
          <div class="s-sub-tab">
            <div class="s-tab-items">
              <div class="s-tab-text">OptionOptionOption 1-2</div>
              <Icon type="close-circled" class="s-tab-i"></Icon>
            </div>
            <div class="s-tab-items">
              <div class="s-tab-text">OptionOptionOption 1-2</div>
              <Icon type="close-circled" class="s-tab-i"></Icon>
            </div>
          </div>
          <!-- tab 条 end -->
          <Breadcrumb :style="{margin: '65px 0 10px'}">
            <BreadcrumbItem>Home</BreadcrumbItem>
            <BreadcrumbItem>Components</BreadcrumbItem>
            <BreadcrumbItem>Layout</BreadcrumbItem>
          </Breadcrumb>
          <router-view :style="{padding: '14px', flex: '1', background: '#fff'}"></router-view>
        </Layout>
      </Layout>
    </Layout>
  </div>
</template>
<script>
import item1 from './views/item1/item1.vue'
export default {
  data () {
      return {}
  },
  mounted () {

  },
  beforeDestroy () {

  },
  methods: {
    jump: function () {
      console.log(1)
    }
  }
}
</script>
